深入探讨 WebXR 中的坐标系，涵盖世界、局部和参考空间，这是构建精确、直观的沉浸式应用的基础。
驾驭 WebXR 空间：掌握坐标系管理以打造沉浸式体验
WebXR 为创建沉浸式体验打开了大门，模糊了数字世界与物理世界之间的界限。这项技术的核心是坐标系的概念。理解并有效管理这些系统对于构建准确、直观且引人入胜的 WebXR 应用至关重要。
为何坐标系在 WebXR 中至关重要
想象一下构建一个虚拟博物馆。您希望用户能够探索精确放置在虚拟空间中的展品。或者，您正在开发一个增强现实应用，将数字内容叠加到现实世界上。在这两种情况下，您都需要一种方法来定义对象的位置和方向，并跟踪用户的移动。这就是坐标系发挥作用的地方。它们为在您的 WebXR 场景中定义空间关系提供了框架。
如果对坐标系没有扎实的理解，您会遇到以下问题：
- 对象放置不正确：对象出现在错误的位置或方向。
- 跟踪不稳定：虚拟对象相对于现实世界发生漂移或抖动。
- 用户体验不一致：在不同设备或环境中对场景的感知存在差异。
WebXR 中的关键坐标空间
WebXR 利用了几个关键的坐标空间，每个空间都有其特定用途。理解这些空间之间的关系对于实现准确的空间跟踪和对象放置至关重要。
1. 世界空间（或全局空间）
世界空间是整个 WebXR 场景的主坐标系。它是所有其他对象和空间定位所参照的最终参考框架。可以将其视为虚拟或增强世界中一切事物的绝对锚点。
世界空间的主要特点：
- 静态：世界空间本身不会移动或旋转。
- 原点 (0, 0, 0)：世界空间的原点是所有坐标的中心参考点。
- 大尺度：世界空间通常比其他坐标空间涵盖的区域大得多。
使用案例：想象一下创建一个虚拟太阳系。太阳、行星及其轨道都是相对于世界空间原点定义的。太阳的位置可能是世界空间中的 (0, 0, 0)，而地球的位置和旋转是相对于该点定义的。您可以在虚拟环境的约束内表示一个跨越广阔距离的星系。
2. 局部空间（或对象空间）
局部空间是特定于单个对象的坐标系。它是相对于对象自身原点定义的。场景中的每个对象都有其自己的局部空间，使您可以轻松管理其内部结构和变换。
局部空间的主要特点：
- 以对象为中心：局部空间的原点通常是对象的中心或关键点。
- 独立：每个对象都有其自己独立的局部空间。
- 层级化：局部空间可以相互嵌套，创建层级关系（例如，手附着在手臂上，手臂附着在身体上）。
使用案例：考虑一辆虚拟汽车。其局部空间的原点可能在汽车底盘的中心。车轮、座椅和方向盘都是相对于汽车的局部空间进行定位和旋转的。当您在世界空间中移动汽车时，其所有组件都会一起移动，因为它们是汽车局部空间变换的子级。
3. 参考空间
参考空间对于在 WebXR 环境中跟踪用户的位置和方向至关重要。它们提供了一种在物理世界和虚拟世界之间建立关系的方法。WebXR 提供了几种类型的参考空间，每种都为不同的跟踪场景量身定制。
参考空间的类型：
- 观看者参考空间 (Viewer Reference Space)：代表用户的头部位置和方向。它本质上是不稳定的，随着用户移动头部，每一帧都会变化。它不适合在环境中持久放置对象。
- 局部参考空间 (Local Reference Space)：提供一个稳定的跟踪空间，锚定于 WebXR 会话开始时用户的初始位置。它适用于用户在小范围内活动的体验（例如，坐姿 VR）。
- 有界参考空间 (Bounded Reference Space)：与局部参考空间类似，但定义了一个特定的边界（例如，一个矩形区域），用户应在此范围内移动。适用于房间尺度的 VR 体验。
- 无界参考空间 (Unbounded Reference Space)：允许用户在跟踪体积内自由移动，没有任何人为边界。适用于用户可能在较大空间中行走或探索超出附近区域的虚拟环境的体验。
- 地面参考空间 (Floor-Level Reference Space)：将跟踪空间锚定到地板。这在增强现实中很有用，这样对象就会看起来在地面上，而与用户设备的高度无关。
选择正确的参考空间：参考空间的选择取决于您的 WebXR 应用的具体要求。请考虑以下因素：
- 跟踪稳定性：跟踪需要多稳定？对于精确的对象放置，您需要一个更稳定的参考空间。
- 用户移动：用户将有多大的移动自由度？选择一个能适应预期运动范围的参考空间。
- 应用类型：是坐姿 VR 体验、房间尺度的 AR 应用，还是其他类型？
示例：对于一个将虚拟咖啡杯放置在现实世界桌子上的 AR 应用，您很可能会使用地面参考空间。这可以确保即使用户四处走动，杯子也能保持在桌子上。
坐标系变换：弥合差距
处理多个坐标系需要能够在它们之间进行对象变换。这涉及将对象从一个空间平移（移动）和旋转到另一个空间。理解这些变换对于准确的对象放置和跟踪至关重要。
关键变换：
- 局部到世界 (Local to World)：将坐标从对象的局部空间转换到世界空间。这用于确定对象在场景中的绝对位置。
- 世界到局部 (World to Local)：将坐标从世界空间转换到对象的局部空间。这对于确定另一个对象相对于该对象的位置很有用。
- 参考空间到世界 (Reference Space to World)：将坐标从参考空间（例如，用户的跟踪位置）转换到世界空间。这允许您相对于用户定位对象。
- 世界到参考空间 (World to Reference Space)：将坐标从世界空间转换到参考空间。这对于确定您世界中的对象相对于当前用户位置的位置很有用。
变换矩阵：在实践中，坐标系变换通常使用变换矩阵来表示。这些是 4x4 矩阵，编码了平移和旋转信息。像 Three.js 和 Babylon.js 这样的 WebXR 库提供了用于创建和应用变换矩阵的函数。
示例（概念性）：
假设你在世界空间中有一朵虚拟花朵，其位置已知。您想将其附加到用户的手上，该手是使用 `viewer` 参考空间进行跟踪的。步骤如下：
- 获取从世界空间原点到观看者参考空间的变换矩阵。
- 对该矩阵求逆，以获得从观看者参考空间到世界空间的变换。
- 获取表示花朵世界空间位置的变换矩阵。
- 将观看者到世界的矩阵乘以花朵的世界位置矩阵。这将得到花朵相对于观看者的位置。
- 最后，通过在手的局部坐标空间内添加一个局部偏移量来调整花朵相对于手的位置。
这个例子展示了将对象相对于动态跟踪的参考空间（如观看者的头部或手）进行定位所需的变换链。
实践示例与代码片段
让我们用流行的 3D 图形 JavaScript 库 Three.js 的代码示例来说明这些概念。
示例 1：在世界空间中放置对象
此代码片段演示了如何创建一个立方体并将其放置在世界空间中：
// 创建一个立方体几何体
const geometry = new THREE.BoxGeometry( 1, 1, 1 );
// 创建一个材质
const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
// 创建一个网格（立方体）
const cube = new THREE.Mesh( geometry, material );
// 在世界空间中设置立方体的位置
cube.position.set( 2, 1, -3 ); // X, Y, Z 坐标
// 将立方体添加到场景中
scene.add( cube );
在这个例子中，立方体的 `position` 属性是一个 `THREE.Vector3`，表示其在世界空间中的坐标。`set()` 方法用于分配所需的 X、Y 和 Z 坐标。
示例 2：创建局部层级结构
此代码演示了如何在两个对象之间创建父子关系，从而创建一个局部层级结构：
// 创建一个父对象（例如，一个球体）
const parentGeometry = new THREE.SphereGeometry( 1, 32, 32 );
const parentMaterial = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
const parent = new THREE.Mesh( parentGeometry, parentMaterial );
scene.add( parent );
// 创建一个子对象（例如，一个立方体）
const childGeometry = new THREE.BoxGeometry( 0.5, 0.5, 0.5 );
const childMaterial = new THREE.MeshBasicMaterial( { color: 0x0000ff } );
const child = new THREE.Mesh( childGeometry, childMaterial );
// 设置子对象相对于父对象的位置（在父对象的局部空间中）
child.position.set( 1.5, 0, 0 );
// 将子对象添加到父对象
parent.add( child );
// 旋转父对象，子对象将围绕它旋转
parent.rotation.y += 0.01;
在这里，`child` 对象使用 `parent.add(child)` 作为 `parent` 对象的子级添加。子对象的 `position` 现在被解释为相对于父对象的局部空间。旋转父对象也会旋转子对象，同时保持它们的相对位置。
示例 3：使用参考空间跟踪用户位置
此代码演示了如何使用参考空间获取用户的姿态（位置和方向）：
async function onSessionStarted( session ) {
// 请求一个局部参考空间
const referenceSpace = await session.requestReferenceSpace( 'local' );
session.requestAnimationFrame( function animate(time, frame) {
session.requestAnimationFrame( animate );
if ( frame ) {
const pose = frame.getViewerPose( referenceSpace );
if ( pose ) {
// 获取用户的位置
const position = pose.transform.position;
// 获取用户的方向（四元数）
const orientation = pose.transform.orientation;
// 使用位置和方向来更新场景或对象。
// 例如，在用户面前放置一个虚拟对象：
myObject.position.copy(position).add(new THREE.Vector3(0, 0, -2));
myObject.quaternion.copy(orientation);
}
}
});
}
这段代码从 `XRFrame` 中检索 `ViewerPose`，它提供了用户相对于指定 `referenceSpace` 的位置和方向。然后可以使用 `position` 和 `orientation` 来更新场景，例如在用户面前放置一个虚拟对象。
坐标系管理的最佳实践
为确保准确而稳健的 WebXR 体验，请遵循以下坐标系管理的最佳实践：
- 选择正确的参考空间：仔细考虑您应用的需求，并选择适当的参考空间。使用错误的参考空间可能导致不稳定和不准确的对象放置。
- 理解层级结构：利用局部层级结构来组织对象并简化变换。这使得管理复杂场景和维护对象之间的关系变得更加容易。
- 使用变换矩阵：利用变换矩阵进行高效的坐标系转换。WebXR 库提供了用于创建和操作这些矩阵的工具。
- 充分测试：在不同的设备和各种环境中测试您的应用，以确保行为一致。坐标系的行为可能因平台而异。
- 处理跟踪丢失：实施机制以优雅地处理跟踪丢失。当跟踪丢失时，考虑冻结场景或向用户提供视觉提示。如果使用局部参考空间，请考虑请求一个新的参考空间并平滑地过渡用户。
- 考虑用户舒适度：避免用户视角的快速或意外变化。坐标系的突然变化可能导致迷失方向和恶心。
- 注意尺度：跟踪您的对象和整个场景的尺度。尺度问题可能导致视觉伪影和不准确的空间感知。在 AR 中，准确表示真实世界的尺度对于可信度至关重要。
- 使用调试工具：利用 WebXR 调试工具（例如，WebXR 设备 API 模拟器）来可视化坐标系并跟踪变换。这些工具可以帮助您识别和解决与坐标系管理相关的问题。
高级主题
多重参考空间
一些 WebXR 应用可能会受益于同时使用多个参考空间。例如，您可能使用一个局部参考空间进行一般跟踪，并使用一个地面参考空间将对象放置在地面上。管理多个参考空间需要仔细的协调和变换逻辑。
锚点
WebXR 锚点提供了一种在虚拟和现实世界对象之间创建持久空间关系的方法。锚点在 AR 应用中特别有用，因为您希望确保虚拟对象相对于现实世界保持固定位置，即使用户四处移动。可以将锚点视为将虚拟对象永久“固定”到用户环境中的特定位置。
示例：您可以在现实世界的桌子上放置一个锚点，并将一个虚拟灯附加到该锚点上。这样，无论用户如何移动，灯都会一直留在桌子上。
命中测试
命中测试允许您确定一条射线（3D 空间中的一条线）是否与现实世界的表面相交。这在 AR 应用中常用于将虚拟对象放置在设备传感器检测到的表面上。命中测试对于创建用户可以在现实世界中操纵虚拟对象的交互式 AR 体验至关重要。
示例：您可以使用命中测试来允许用户点击现实世界的地板，并在该位置放置一个虚拟角色。
结论
掌握坐标系管理是构建引人入胜且精确的 WebXR 体验的基础。通过理解不同类型的坐标空间、掌握变换并遵循最佳实践，您可以创建无缝融合虚拟与物理世界的沉浸式应用。
随着 WebXR 技术的不断发展，新的功能和能力将会出现。紧跟最新发展并尝试不同的技术，将使您能够推动沉浸式体验的边界，并创造出真正创新的应用。
WebXR 正在全球各行各业迅速获得发展势头，从教育和培训到医疗保健和娱乐。深入理解坐标系对于未来的开发者至关重要。国际应用示例包括：
- 虚拟旅游（全球）：允许用户以准确的比例和定位虚拟探索世界各地的地标。
- 远程协作（国际团队）：使团队能够在共享的虚拟空间中协作处理 3D 模型，无论他们身在何处。
- AR 增强教育（多语言）：将交互式 3D 模型叠加到教科书上，创建多种语言的沉浸式学习体验。
- 医疗保健培训（全球）：使用精确解剖模型中的逼真模拟来培训医生和护士进行外科手术。
可能性是无限的。通过专注于扎实的空间理解和拥抱持续学习，您可以成功地驾驭 WebXR 开发这个激动人心的领域。